/*初始化区域滚动组件*/
mui('.mui-scroll-wrapper').scroll({
    indicators:false
})
$(function(){
    /* 约定本地存储历史记录的key为  letaoHistory */
		// 本地存储历史记录格式 ['张三', 'lisi']   ===> localStorage.setItem("letaoHistory", JSON.stringify(['张三', '李四']))
    /* 1渲染列表 */
    /* 1.1 获取 */
    var historyList = getLocalData('letaoHistory')
    /* 1.2 渲染 */
    $('.lt_history').html(template('historyTmp',{list: historyList}))
    
    /* 2点击搜索 */
    // 2.1 给按钮注册点击事件
    $('.search_btn').on('tap',function() {
    	// 2.2 获取文本框输入内容
    	var val = $('.search_input').val().replace(/^\s*$/g, '')
      // var val = $.trim($('.search_input').val())
    	if (!val) {
    		mui.toast('搜索不能为空')
    		return
    	}
    	// 2.3 先获取本地存储的搜索记录在往里面追加当前搜索记录
    	// 2.3.1 获取本地存储的搜索记录
    	var arr = getLocalData('letaoHistory') // ['张三']
    	/*1.)在正常的10条记录内 正常添加*/
      /*2.)已经10条记录了    添加一条 并且 删除最早的一条 */
      /*3.)如果有相同记录    添加一条 并且 删除相同的一条 */
      // 2.3.2 判断当前搜索的内容 本地是否有
      var flag = false
      var flagIndex = -1
      arr.forEach(function (item, index) {
      	// item 当前数组中正在遍历的那一项 index当前正在遍历那一项的索引
      	if(item == val) {
      		flag = true
      		flagIndex = index
      	}
      })
      // 2.3.3 如果有则删除之前的 再将此次的追加到数组最后 -- 最新的搜索总在数组最后
      if (flag) { // 表示本地存储中有当前搜索框中的搜索的值
      	arr.splice(flagIndex, 1) // 先删除
      	arr.push(val)            // 在追加
      } else {
      	if (arr.length < 10) {   // 可以添加
      		arr.push(val)
      	} else { // 已经有10条记录啦
      		arr.splice(0, 1) // 删除一条
      		arr.push(val)    // 追加一条
      	}
      }
      
      // 2.3.4 本地存储
      localStorage.setItem('letaoHistory', JSON.stringify(arr))
      
      // 2.3.5 跳转到搜索列表页
      location.href = 'searchList.html?key=' + val
    })
    
    /* 3删除记录 */
    // 3.1 事件委托给删除绑定事件
   	$('.lt_history').on('tap', '.mui-icon', function() {
   		// 3.2 获取当前按钮点击时的 data-index属性  即索引
      // var index = $(this).data('index')                // jq的data方法获取
      // var index = $(this).attr('data-index')           // jq的attr方法获取
   		// var index = $(this)[0].dataset.index             // H5获取data属性
   		var index = $(this)[0].getAttribute('data-index')   // js获取getAttribute属性
     	// console.log(index)
     	
     	// 3.2 获取本地数据
     	var arr = getLocalData('letaoHistory')
     	// 3.3 删除本地存储中的数据
     	arr.splice(index, 1) // 第一个参数索引 第二个参数删除的项数 第三个参数新增的项
     	// 3.4 本地重新存储
     	localStorage.setItem('letaoHistory', JSON.stringify(arr))
     	// 3.5 重新渲染页面的搜索历史
     	$('.lt_history').html(template('historyTmp',{list: arr}))
   	})
   	
    /* 4清空记录 */
		// 4.1 用事件委托给清空记录按钮注册事件
		$('.lt_history').on('tap', '.fa', function() {
			// 4.2 清空本地存储
			localStorage.setItem('letaoHistory', '')
			// 4.3 重新渲染
			$('.lt_history').html(template('historyTmp',{list: []}))
		})
});
/* 0 获取存储数据 */
var getLocalData = function(key){
    /* 0.1.约定一个键  letaoHistory 值存的是json格式的字符串*/
    /* 0.2.通过这个键获取值 如果有就使用 如果没有默认空数组的字符串*/
    var str = localStorage.getItem(key)||'[]'
    /* 0.3.转成成js数据*/
    var arr = JSON.parse(str)
    /* 0.4.返回js可操作的数组*/
    return arr
}
